<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>浏览器升级</title>
    <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.ico" media="screen" />
    <style>
        * {
            padding: 0;
            margin: 0;
            border: 0;
        }

        .box {
            position: absolute;
            left: 50%;
            top: 45%;
            margin: -220px 0 0 -325px;
            padding-bottom: 40px;
            width: 650px;
            background: #fff;
            border: 8px solid #ccc;
            border-color: rgba(0,0,0,.4);
            border-radius: 5px;
            -webkit-box-reflect: below 2px -webkit-linear-gradient(bottom, rgba(255,255,255,.5), rgba(255,255,255,.3) 100px, rgba(255,255,255,0) 180px);
        }
        .titleBar{
            margin:40px 40px 0;
            padding-bottom: 30px;
            border-bottom: 1px solid #ccc;
            position: relative;
            padding-left: 55px;
            font-size: 14px;
            color: #777;
        }
        .warnIcon,.chrome,.firefox,.qq,.sougou,.browser360,.jisu360{
            display: inline-block;
            width: 90px;
            height: 90px;
            background: url(../images/browsers.png) no-repeat;
        }
        .chrome{ background-position: 0 -67px; }
        .firefox{ background-position: 0 -179px; }
        .qq{ background-position: 0 -510px; }
        .sougou{ background-position: 0 -608px; }
        .browser360{ background-position: 0 -292px; }
        .jisu360{ background-position: 0 -179px; }
        .titleBar .title{
            font-size: 18px;
            color: #222;
            padding-bottom: 3px;
        }
        .titleBar .warnIcon{
            position: absolute;
            left: 0; 
            top: 5px;
            width: 45px;
            height: 45px;
        }
        .recommend{
            margin-top: 40px;
            text-align: center;
            line-height: 1.8;
            width: 90%;
            margin-left: 5%;
            display: box;
            display: -ms-flexbox;
            display: flex;
        }
        .recommend .item{
            display:inline-block;
            float: left;
            box-flex: 1;
            flex: 1;
            width:20%;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="titleBar">
            <i class="warnIcon"></i>
            <div class="title">Hi, 我们检测到您正在使用版本较旧的浏览器。</div>
            <div class="desc">为了能让您方便顺畅的操作我们的系统，请使用下列我们推荐的浏览器：</div>
        </div>
        <div class="recommend">
            <div class="item">
                <span class="chrome"></span>
                <p>chrome</p>
            </div>
            <div class="item">
                <span class="firefox"></span>
                <p>firefox</p>
            </div>
            <div class="item">
                <span class="qq"></span>
                <p>QQ</p>
            </div>
            <div class="item">
                <span class="sougou"></span>
                <p>搜狗</p>
            </div>
            <div class="item">
                <span class="browser360"></span>
                <p>360</p>
            </div>
        </div>
    </div>
</body>
</html>